<template>
<div>
   <el-container>
       <el-main >
         <div class="login-box">
         <el-form :label-position="labelPosition" label-width="120px" :model="registerForm">
  <el-form-item label="用户名">
    <el-input v-model="registerForm.userName"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="password" v-model="registerForm.password"></el-input>
  </el-form-item>
  <el-form-item label="重新输入密码">
    <el-input type="password" v-model="registerForm.cpassword"></el-input>
  </el-form-item>
 <el-form-item>
    <el-button>立即登陆</el-button>
    <el-button type="primary" @click="register">立即注册</el-button>
  </el-form-item>
</el-form>
</div>
  </el-main>
   </el-container>
        </div>
</template>

<script>

import api from '../api'
export default {
  name: "Register",
  created() {},
  computed: {
    // comValue: function() {
    //   return this.task.value.split(",");
    // }
  },
  methods: {
    register(index) {
        api.register(this.registerForm)
        .then((res)=>{
           console.log(res)
        })
        // axios.post('login',this.loginForm)
        // .then(()=>{
        //     alert('sss')
        // })
      //    alert('ss')
      // this.task= this.tasks[index];
    }
  },
  data() {
    return {
       labelPosition: 'top',
        registerForm:{
            userName:'',
            password:'',
            cpassword:''
        }
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
.login-box {
  margin: 0 auto;
  width: 400px;
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 5px;
}
.mt15 {
  margin-top: 15px;
}

</style>
